<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>美业团</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="js/libs/swiper/swiper-bundle.min.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>美业团数据可视化</h1>
      <div class="show-time"></div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //开始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".show-time").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "日-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
    </header>

    <!-- 页面主体 -->
    <section class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel bar">
          <h2>店铺销售额排行</h2>
          <!-- 图表放置盒子 -->
          <div class="chart">
            <div class="mod">
              <ul class="mod-hd">
                  <li class="num">排序</li>
                  <li class="name">店铺名称</li>
                  <li>店铺销售额</li>
              </ul>
              <div class="mod-bd swiper-container" >
                <div class="swiper-wrapper" id="J_store_sale_html">

                </div>
              </div>
            </div>
          </div>
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>店铺订单量排行</h2>
          <div class="chart">
            <div class="mod">
                <ul class="mod-hd">
                  <li class="num">排序</li>
                  <li>店铺名称</li>
                  <li>店铺订单量</li>
                </ul>
              <div class="mod-bd swiper-container" >
                <div class="swiper-wrapper" id="J_store_volume_html">

                </div>
              </div>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>店铺新客数排行</h2>
          <div class="chart">
            <div class="mod">
                <ul class="mod-hd">
                  <li class="num">排序</li>
                  <li>店铺名称</li>
                  <li>店铺新客数</li>
                </ul>
              <div class="mod-bd swiper-container" >
                  <div class="swiper-wrapper" id="J_store_new_user_html">

                  </div>
              </div>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <!-- 头部 no模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li id="J_sale"></li>
              <li id="J_volume"></li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>总销售额</li>
              <li>总订单量</li>
            </ul>
          </div>
        </div>
        <div class="no">
          <div class="no-hd">
            <ul>
              <li id="J_new_user"></li>
              <li id="J_old_user"></li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>总成交人数</li>
              <li>总会员数</li>
            </ul>
          </div>
        </div>
        <div class="panel bar2" style="height: 7.775rem;margin-top: 5px;">
          <h2>产品成交动态</h2>
          <div class="chart">
            <div class="mod">
                <ul class="mod-hd">
                  <li class="name">店铺</li>
                  <li>角色</li>
                  <li class="name">购买用户</li>
                  <li class="name">购买产品</li>
                  <li>成交价</li>
				  <li>成交时间</li>
                </ul>
              <div class="mod-bd-pro swiper-container">
                  <div class="swiper-wrapper" id="J_team_user_sale_html">

                  </div>
              </div>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        
        <div class="panel line2">
			<h2>员工销售额</h2>
			<div class="chart">
			  <div class="mod">
			    <ul class="mod-hd">
			        <li class="num">排序</li>
			        <li class="name">员工姓名</li>
			        <li>销额</li>
			    </ul>
			    <div class="mod-bd swiper-container" >
			      <div class="swiper-wrapper" id="J_team_sale_html">
			      </div>
			    </div>
			  </div>
			</div>
			<div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <h2>员工收入排行</h2>
          <div class="chart">
            <div class="mod">
              <div class="mod-hd">
                  <li class="num">排序</li>
                  <li class="name">员工姓名</li>
                  <li>收入</li>
              </div>
              <div class="mod-bd swiper-container" >
                <div class="swiper-wrapper" id="J_store_old_user_html">
                </div>
              </div>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
		<div class="panel bar2">
		  <h2>员工订单量排行</h2>
		  <div class="chart">
		    <div class="mod">
		      <div class="mod-hd">
		          <li class="num">排序</li>
		          <li>员工名称</li>
		          <li>数量</li>
		      </div>
		      <div class="mod-bd swiper-container" >
		        <div class="swiper-wrapper" id="J_team_money_html">
		        </div>
		      </div>
		    </div>
		  </div>
		  <div class="panel-footer"></div>
		</div>
      </div>
    </section>
    <script type="html/javascript" id="J_store_sale_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.desc}}</li>
              <li>{{value.sale}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_store_volume_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.desc}}</li>
              <li>{{value.volume}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_store_new_user_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.desc}}</li>
              <li>{{value.new_user_num}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_store_old_user_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.storeuser.name}}</li>
              <li>{{value.summoney}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_store_user_sale_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li >{{value.name}}</li>
              <li>{{value.type_name}}</li>
              <li class="name">{{value.store.desc}}</li>
              <li>{{value.sale}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_team_user_sale_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="name">{{value.store.desc}}</li>
              <li>{{value.inviteeuser}}</li>
              <li class="name">{{value.user.nickname}}</li>
			  <li class="name">{{value.product.name}}</li>
              <li>{{value.productorder.actual_price}}</li>
              <li>{{value.show_update_time}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_team_sale_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.name}}</li>
              <li>{{value.count}}</li>
          </ul>
      {{/each}}
    </script>
    <script type="html/javascript" id="J_team_money_temp">
      {{each data as value index}}
          <ul class="mod-bd-item swiper-slide">
              <li class="num">{{index+1}}</li>
              <li class="name">{{value.name}}</li>
              <li>{{value.userinvs}}</li>
          </ul>
      {{/each}}
    </script>
    <script src="js/config_zhouzhi.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/libs/swiper/swiper-bundle.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/template.js"></script>
    <!-- 引入china.js 完成地图模块 -->
    <script src="js/index_zhouzhi.js"></script>
  </body>
</html>
